@mixin scale-hairline-common($color, $top, $right, $bottom, $left) {
    content: "";
    position: absolute;
    display: block;
    z-index: 1;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    background-color: $color;
}

// 添加边框
/* 
  用法：

  // 导入
  @import '@scss/hairline.scss';

  // 在类中使用
  .a {
	  position: relative;
    @include hairline(bottom, #f0f0f0);
  }
*/
@mixin hairline($direction, $color: #000, $radius: 0) {
    @if $direction == top {
        border-top: 1px solid $color;

        // min-resolution 用来检测设备的最小像素密度
        @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
            border-top: none;

            &::before {
                @include scale-hairline-common($color, 0, auto, auto, 0);
                width: 100%;
                height: 1px;
                transform-origin: 50% 50%;
                transform: scaleY(0.5);

                @media (min-resolution: 3dppx),
                    (-webkit-min-device-pixel-ratio: 3) {
                    transform: scaleY(0.33);
                }
            }
        }
    } @else if $direction == right {
        border-right: 1px solid $color;

        @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
            border-right: none;

            &::after {
                @include scale-hairline-common($color, 0, 0, auto, auto);
                width: 1px;
                height: 100%;
                background: $color;
                transform-origin: 100% 50%;
                transform: scaleX(0.5);

                @media (min-resolution: 3dppx),
                    (-webkit-min-device-pixel-ratio: 3) {
                    transform: scaleX(0.33);
                }
            }
        }
    } @else if $direction == bottom {
        border-bottom: 1px solid $color;

        @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
            border-bottom: none;

            &::after {
                @include scale-hairline-common($color, auto, auto, 0, 0);
                width: 100%;
                height: 1px;
                transform-origin: 50% 100%;
                transform: scaleY(0.5);

                @media (min-resolution: 3dppx),
                    (-webkit-min-device-pixel-ratio: 3) {
                    transform: scaleY(0.33);
                }
            }
        }
    } @else if $direction == left {
        border-left: 1px solid $color;

        @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
            border-left: none;

            &::before {
                @include scale-hairline-common($color, 0, auto, auto, 0);
                width: 1px;
                height: 100%;
                transform-origin: 100% 50%;
                transform: scaleX(0.5);

                @media (min-resolution: 3dppx),
                    (-webkit-min-device-pixel-ratio: 3) {
                    transform: scaleX(0.33);
                }
            }
        }
    } @else if $direction == all {
        border: 1px solid $color;
        border-radius: $radius;

        @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
            position: relative;
            border: none;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 200%;
                height: 200%;
                border: 1px solid $color;
                border-radius: $radius * 2;
                transform-origin: 0 0;
                transform: scale(0.5);
                box-sizing: border-box;
                pointer-events: none;
            }
        }
    }
}

// 移除边框
@mixin hairline-remove($position: all) {
    @if $position == left {
        border-left: 0;
        &::before {
            display: none !important;
        }
    } @else if $position == right {
        border-right: 0;
        &::after {
            display: none !important;
        }
    } @else if $position == top {
        border-top: 0;
        &::before {
            display: none !important;
        }
    } @else if $position == bottom {
        border-bottom: 0;
        &::after {
            display: none !important;
        }
    } @else if $position == all {
        border: 0;
        &::before {
            display: none !important;
        }
        &::after {
            display: none !important;
        }
    }
}
